<!--后台管理界面的统一界面-->
<!--头部-->
<head th:fragment="top_head(title)">
    <meta charset="UTF-8">
    <title th:replace="${title}">首页</title>
    <link rel="shortcut icon" th:href="@{/images/bird.gif}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/cus_style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/nav_basic_icons/iconfont.css}">
</head>
<!--导航栏-->
<nav th:fragment="top_nav_bar(n)" class="ui inverted attached segment cus-padding-top-bottom-minimize">
    <!--    导航栏项目列表-->
    <div class="ui container">
        <div class="ui menu inverted stackable menu secondary">
            <h2 class="ui teal header item">
                Blog后台
            </h2>
            <a href="#" th:href="@{/admin/blogs}" class="c-toggle item cus-mobile-hide"
               th:classappend="${n==1} ? 'active'"><i
                    class="iconfont icon-B4"></i>博客</a>
            <a href="#" th:href="@{/admin/types/1}" class="c-toggle item cus-mobile-hide"
               th:classappend="${n==2} ? 'active'"><i
                    class="iconfont icon-B2"></i>分类</a>
            <a href="#" th:href="@{/admin/tags/1}" class="c-toggle item cus-mobile-hide"
               th:classappend="${n==3} ? 'active'"><i
                    class="iconfont icon-B1"></i>标签</a>
            <div class="right c-toggle cus-mobile-hide menu">
                <div class="ui dropdown item" id="admin-info-dropdown">
                    <div class="text">
                        <img th:src="@{/images/avatar.jpg}" class="ui avatar image">
                        <span th:text="${session.user.nickname}">用户名</span>
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" th:href="@{/admin/logOut}" target="_blank" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--    手机端导航栏切换按钮-->
    <a href="#" id="toggle_nav_btn" class="ui black icon button cus-mobile-show m-top-right-position">
        <i class="iconfont icon-B"></i>
    </a>
</nav>
<!--底部内容-->
<footer th:fragment="footer_nav_bar" class="ui inverted vertical segment cus-padding-top-bottom-massive">
    <!--    注意center和aligned的位置，有先后顺序-->
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img th:src="@{/images/bird.gif}" class="ui rounded image" alt="一张占位符bird">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新文章</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新文章</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">最新文章</h4>
                <p class="cus-text-lined">个人博客的一些介绍</p>
            </div>
        </div>
        <!--    分割线-->
        <div class="ui inverted section divider"></div>
        <p>
            Copyright © Lobo All Rights Reserved.
        </p>
    </div>
    <script th:src="@{/js/jquery-3.6.0.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/semantic.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.min.js}" type="text/javascript"></script>
    <script type="text/javascript">
        // 手机端切换导航栏
        $('#toggle_nav_btn').click(function () {
            $('.c-toggle').toggleClass('cus-mobile-hide');
        })

        $('#admin-info-dropdown').dropdown()
    </script>
</footer>
<!--专门给添加文章addBlog页面设置的头部与底部，引入比其它页面更多的js（编辑器等）-->
<!--头部-->
<head th:fragment="add_blog_top_head(title)">
    <meta charset="UTF-8">
    <title th:replace="${title}">首页</title>
    <link rel="shortcut icon" th:href="@{/images/bird.gif}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/cus_style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/lib/md-editor/css/editormd.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/nav_basic_icons/iconfont.css}">
</head>
<!--底部内容-->
<footer th:fragment="add_blog_footer_nav_bar" class="ui inverted vertical segment cus-padding-top-bottom-massive">
    <!--    注意center和aligned的位置，有先后顺序-->
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img th:src="@{/images/bird.gif}" class="ui rounded image" alt="一张占位符bird">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新文章</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新文章</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">最新文章</h4>
                <p class="cus-text-lined">个人博客的一些介绍</p>
            </div>
        </div>
        <!--    分割线-->
        <div class="ui inverted section divider"></div>
        <p>
            Copyright © Lobo All Rights Reserved.
        </p>
    </div>
    <script th:src="@{/js/jquery-3.6.0.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/semantic.min.js}" type="text/javascript"></script>
    <script th:src="@{/lib/md-editor/editormd.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.min.js}" type="text/javascript"></script>
    <script type="text/javascript">
        // 手机端切换导航栏
        $('#toggle_nav_btn').click(function () {
            $('.c-toggle').toggleClass('cus-mobile-hide');
        })

        $('#admin-info-dropdown').dropdown()
    </script>
</footer>